<template>
  <div class="app">
    <el-button @click="search">搜索</el-button>
    <DragLbTable
      :default-index="false"
      :default-checkbox="false"
      :canDrag="false"
      v-model:tableData="tableData"
      v-model:fieldList="fieldList"
      row-key="id"
      v-model:defaultExpandTree="defaultExpandTree"
      @handleExpandChange="handleExpandChange"
    >
    <!-- 
       -->
      <!-- 多选 -->
      <!-- <template #default-checkbox='{element}'>
        <div class="table-div-check">
          <el-checkbox class="unmover" v-model="element.checked" @change="handleCheckTable(element.id)" size=""/>
        </div>
      </template> -->
      <!-- <template #title='{element}'>
        <div>
          自奥术大师大所多定义：{{element.title}}
        </div>
      </template> -->
      <template #date='{element}'>
        <div>
          自定义日期：{{element.date}}
        </div>
      </template>
      <template #date1='{element}'>
        <div>
          自定义日期：{{element.date}}
        </div>
      </template>
      <template #date2='{element}'>
        <div>
          自定义日期：{{element.date}}
        </div>
      </template>
      <template #date3='{element}'>
        <div>
          自定义日期：{{element.date}}
        </div>
      </template>
      <template #options='{element}'>
        <div class="table-td-option">
          <el-button type="primary" link @click="goDetails(element)">
            展开
          </el-button>
        </div>
      </template>
      <template #noTableData>
        <div class="no-data" >
                    <svg t="1728460685872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="70" height="70"><path d="M103.424 621.632h13.632c3.84 0 5.76 3.968 5.76 7.872 0 3.84-3.904 5.888-5.76 5.888h-13.632v13.696c0 3.776-4.032 5.76-5.888 5.76-1.92 0-3.904 0-5.888-1.984-1.92-1.856-1.92-1.856-1.92-3.776v-13.696h-13.696c-3.84 0-5.824-4.032-5.824-5.888 0-3.968 3.904-7.872 5.824-7.872h13.696v-13.696c0-3.904 3.904-5.824 7.808-5.824 3.84 0 5.888 1.92 5.888 5.824v13.696z m903.04-54.528v-13.76c0-1.856 0-4.032-1.856-4.032-2.048-1.856-3.904-1.856-5.952-1.856-3.904 0-5.824 1.856-5.824 5.888v13.76h-13.696c-1.92 0-3.968 0-5.76 1.728-1.984 2.112-1.984 4.032-1.984 5.888 0 4.032 3.84 6.08 5.824 6.08h13.76v13.568c0 3.776 3.84 5.888 5.76 5.888 4.032 0 7.872-3.968 7.872-5.888v-13.568h13.568c3.84 0 5.824-3.968 5.824-6.08 0-3.776-3.84-7.616-5.888-7.616h-11.648z m-497.344 224.192H163.776a13.888 13.888 0 0 1-9.728-3.968 14.592 14.592 0 0 1-3.84-9.728c0-7.808 5.824-13.504 13.568-13.504h62.4a63.296 63.296 0 0 1-7.744-27.392V340.736c0-13.632 5.888-29.248 15.616-38.976a54.144 54.144 0 0 1 38.976-15.616h41.024v-13.632c0-13.696 5.76-29.312 15.616-39.04a54.592 54.592 0 0 1 39.04-15.616h329.6c13.696 0 29.312 5.888 38.976 15.616a54.656 54.656 0 0 1 15.68 39.04v397.888a45.824 45.824 0 0 1-7.936 27.456h76.032c7.808 0 13.76 5.632 13.76 13.568a13.44 13.44 0 0 1-13.76 13.568h-163.84v13.632a44.544 44.544 0 0 1-7.68 27.392h7.68c7.936 0 13.76 5.824 13.76 13.568a13.44 13.44 0 0 1-13.76 13.76H585.088a26.688 26.688 0 0 1-3.84 33.088 25.024 25.024 0 0 1-19.456 7.936 25.024 25.024 0 0 1-19.584-7.936l-33.088-35.136z m50.624-27.2h43.008a26.816 26.816 0 0 0 27.328-27.392V338.816c0-15.616-11.84-27.328-25.536-27.328h-331.52a27.84 27.84 0 0 0-27.2 27.328v397.952c0 15.616 11.584 27.392 27.2 27.392h208.704l-7.808-7.936a29.184 29.184 0 0 1-7.808-27.392l-13.696-13.568a98.688 98.688 0 0 1-130.624-13.568 96.32 96.32 0 0 1 3.84-130.688 96.384 96.384 0 0 1 130.816-3.904c38.912 33.152 44.8 89.536 13.696 130.752l13.568 13.568a28.928 28.928 0 0 1 27.264 7.68l48.768 44.992z m97.536-68.288h41.024a26.688 26.688 0 0 0 27.264-27.328V270.592a26.624 26.624 0 0 0-27.264-27.328H370.56a26.624 26.624 0 0 0-27.2 27.328v15.616h259.456c13.632 0 29.184 5.824 38.848 15.616a54.272 54.272 0 0 1 15.616 38.976v355.008zM175.552 192.512h19.456c5.888 0 9.728 3.904 9.728 9.728s-3.84 9.792-9.728 9.792h-19.456v19.456c0 5.888-3.904 9.792-9.728 9.792-2.048 0-5.888-1.92-7.872-3.904s-1.92-3.904-1.92-7.808v-19.456h-21.44c-1.984 0-5.888 0-7.808-3.904-2.048-1.984-3.968-3.904-3.968-7.808 0-5.888 3.968-9.728 9.728-9.728h21.44v-19.584c0-5.888 3.968-9.728 9.728-9.728 5.888 0 9.728 3.84 9.728 9.728v23.424h2.112zM13.632 777.6c0-7.808 5.824-13.504 13.568-13.504h81.92c7.936 0 13.696 5.696 13.696 13.504 0 7.872-5.76 13.696-13.696 13.696H27.2a14.016 14.016 0 0 1-9.728-3.968 14.784 14.784 0 0 1-3.84-9.728z m433.024-87.68a68.288 68.288 0 0 0 0-97.536 68.288 68.288 0 0 0-97.536 0 68.352 68.352 0 0 0 0 97.536 68.16 68.16 0 0 0 97.536 0zM302.272 368.064c0-7.808 5.888-13.632 13.632-13.632h150.208a13.44 13.44 0 0 1 13.696 13.632 13.376 13.376 0 0 1-13.696 13.696H315.968a15.104 15.104 0 0 1-9.728-3.968c-3.968-3.84-3.968-7.744-3.968-9.728z m0 68.288c0-7.808 5.888-13.632 13.632-13.632H534.4a13.44 13.44 0 0 1 13.824 13.632 13.44 13.44 0 0 1-13.824 13.696H315.968a15.04 15.04 0 0 1-9.728-3.904c-3.968-3.968-3.968-5.824-3.968-9.792z m0 68.288c0-7.872 5.888-13.696 13.632-13.696H411.52a13.44 13.44 0 0 1 13.632 13.696 13.312 13.312 0 0 1-13.632 13.632H315.968a14.72 14.72 0 0 1-9.728-3.968c-3.968-1.856-3.968-5.76-3.968-9.664zM40.896 422.72c-15.616 0-27.264-7.808-35.072-21.44-7.808-13.632-7.808-29.312 0-40.96a40.896 40.896 0 0 1 35.072-21.44c23.488 0 41.024 17.536 41.024 40.96 0 23.296-17.536 42.88-41.024 42.88z m0-21.44a20.416 20.416 0 0 0 17.536-9.728 17.856 17.856 0 0 0 0-19.584c-3.84-7.872-9.728-11.712-17.536-11.712a21.632 21.632 0 0 0-21.376 21.504c1.92 11.648 9.792 19.52 21.376 19.52z m850.496-60.544c-15.552 0-29.44-7.744-35.072-21.44a38.464 38.464 0 0 1 0-40.96c7.68-11.776 21.376-21.44 35.072-21.44 23.36 0 40.96 17.536 40.96 40.96-0.064 23.424-19.456 42.88-40.96 42.88z m0-21.44a20.736 20.736 0 0 0 17.536-9.728c3.968-5.888 3.968-13.696 0-21.44a20.48 20.48 0 0 0-17.536-9.728 21.568 21.568 0 0 0-21.44 21.376c0 9.792 9.728 19.52 21.44 19.52z m0 0" fill="#515151" p-id="8473"></path></svg>

          <span>暂无数据，点击下方立即发布</span>
          <el-button type="primary" @click="linkToAdd" style="margin-top: 10px;" :loading="modelLoading">{{ publish_text }}</el-button>
        </div>
      </template>
    </DragLbTable>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import DragLbTable from './components/DragLbTable.vue'
// import { DragLbTable } from '../dist/drag-lb-table.es'
// console.log('DragLbTable',DragLbTable);

import '../dist/style.css'

const fieldList = ref([
  {
    title: '附件名称',
    name: 'title',
    fixed: 'left',
    width:400,
    showTextTip: true
  },
  {
    title: 'id',
    name: 'id',
  },
  {
    title: '日期',
    name: 'date',
    width: 480,
  },
  {
    title: '日期',
    name: 'date1',
    width: 480,
  },
  {
    title: '日期',
    name: 'date2',
    width: 480,
  },
  {
    title: '日期',
    name: 'date3',
    width: 480,
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])
const tableData = ref([
  { title: '测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1', id: '1', date:'2024-09-04 12:00:00', children: [
    { title: '测试children-1', date:'2024-09-04 12:00:00', id: '1-1',  children:[
      { title: '测试children-1-2', date:'2024-09-04 12:00:00', id: '1-1-2' },
      { title: '测试children-1-3', date:'2024-09-04 12:00:00', id: '1-1-3' },
      { title: '测试children-1-4', date:'2024-09-04 12:00:00', id: '1-1-4' },
    ] },
    { title: '测试children-2', date:'2024-09-04 12:00:00', id: '1-2',children:[
      { title: '测试children-2-2', date:'2024-09-04 12:00:00', id: '2-1-2' },
      { title: '测试children-2-3', date:'2024-09-04 12:00:00', id: '2-1-3' },
      { title: '测试children-2-4', date:'2024-09-04 12:00:00', id: '2-1-4' },
    ] },
    { title: '测试children-3', date:'2024-09-04 12:00:00', id: '1-3' },
  ]},
  { title: '测试2', date:'2024-09-04 12:00:00', id: '2' },
  { title: '测试3', date:'2024-09-04 12:00:00', id: '3' },
  { title: '测试4', date:'2024-09-04 12:00:00', id: '4', children:[
    { title: '测试children-4', date:'2024-09-04 12:00:00', id: '4-1' }
  ] },
  { title: '测试5', date:'2024-09-04 12:00:00', id: '5' },
])
const defaultExpandTree = ref(['1-1'])
const handleExpandChange = (data) => {
  console.log('触发3',data);
}
const search = () => {
  tableData.value.push({ title: '测试9', date:'2024-09-04 12:00:00', id: '9' })
}
</script>

<style scoped>
.no-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    height: 400px;
}
</style>
